<template>
  <div class="tooltip" :style="{ '--ellipsis': ellipsis }">
    <el-tooltip
      ref="tlp"
      :content="text"
      effect="dark"
      :disabled="!tooltipFlag"
      :placement="placement"
    >
      <span @mouseenter="visibilityChange($event)">{{ text }}</span>
    </el-tooltip>
  </div>
</template>
<script setup>
import { defineProps, ref } from "vue";
const props = defineProps({
  text: { type: String, default: "" }, // 字符内容
  placement: { type: String, default: "bottom" },
  ellipsis: { type: Number, default: "none" }, // 行数
});
const tooltipFlag = ref(false);
const tlp = ref(null);

const visibilityChange = (event) => {
  const ev = event.target;
  const ev_height = ev.offsetHeight; // 文本的实际高度
  const content_height = tlp.value.$el.parentNode.clientHeight; // 文本容器高度
  if (content_height < ev_height) {
    // 实际内容高度 > 文本高度 =》内容溢出
    tooltipFlag.value = true; // NameIsIncludeWord ? true : !!false
  } else {
    // 否则为不溢出
    tooltipFlag.value = false;
  }
};
</script>
<style lang="scss" scoped>
@mixin ellipsis($clamp) {
  display: inline-block;
  display: -webkit-box;
  -webkit-line-clamp: $clamp;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all; //英文数字折行
}
.tooltip {
  @include ellipsis(var(--ellipsis));
}
</style>
